<script>
import axios, { AxiosError } from 'axios'
import router from "@/router";

	export default {
        name:'Login',
		data() {
			return {
				overlaylong: 'overlaylong',
				overlaytitle: 'overlaytitle',
				username    	 : '',
				password		 : '',
				disfiex			 : 0,
				showQuestion	 : 0,
				signInLabel:'',
				signUpLabel:'',
				token:	'',
				ip: '',
				formData: {
					username: '',
					password: '',
					repeatpassword: '',
					email:'',
					role:1
				},
				usernameMsg:'',
				passwordMsg:'',

				findPsdData:{
					username:'',
					question:'',
					answer:'',
					password:'',
					repeatPassword:'',
				}
			}
			
		},
		methods: {
			Signin() {
				this.username = ''
				this.password = ''
				console.log("Signin...")
				this.overlaylong = "overlaylongleft"
				this.overlaytitle = "overlaytitleright"

					this.disfiex = 1
			},
			Signup() {
				this.formData = ''
				this.overlaylong = "overlaylongright"
				this.overlaytitle = "overlaytitleleft"
 
					this.disfiex = 0
			},
			findBtn(){
				this.username = ''
				this.password = ''
				this.overlaylong = "overlaylongleft"
				this.overlaytitle = "overlaytitleright"

					this.disfiex = 3
			},
			back(){
				this.findPsdData = ''
				this.showQuestion = 0
				this.overlaylong = "overlaylongright"
				this.overlaytitle = "overlaytitleleft"

					this.disfiex = 0
			},
			//使用结构赋值进行异常处理
			promise_error_process(promise){
				return promise.then(data=>[null,data])
								.catch(err=>[err,null])
			},
			async checkUsernameByAjax(username_c){
				const response = await axios({
					url				: 'http://localhost:8090/api/users/isExist',
					method			: 'GET',
					withCredentials : true,
					headers			: {
    				'Content-Type'	: 'application/json'
  					},
					params :{
						username : username_c 
					}
				})
				return response
			},
			async checkSignIn(username,password){
				const response = await axios({
					url 			: 'http://127.0.0.1:8090/api/users/admin',
					method  		: 'POST',
					withCredentials : true,
					headers			: {
    				'Content-Type': 'application/x-www-form-urlencoded'
  					},
					params 			: {
						username : username,
						password : password
					}
				})
				return response; 
			},
			async checkRegister(){
				console.log(this.formData)
				const response = await axios({
					url				: 'http://localhost:8090/api/users/register',
					method			: 'POST',
					withCredentials : true,
					headers			: {
    				'Content-Type'	: 'application/x-www-form-urlencoded'
  					},
					params			: this.formData
				})
				return response
			},
			async getQuestionByAjax(){
				const response = await axios({
					url				: `http://127.0.0.1:8080/api/users/getquestion/${this.findPsdData.username}`,
					method			: 'GET',
					withCredentials : true
				})
				return response
			},
			async findPsdByAjax(){
				const response = await axios({
					url				: `http://127.0.0.1:8080/api/users/updatePwd/${this.findPsdData.username}`,
					method			: 'POST',
					withCredentials : true,
					headers			: {
    				'Content-Type'	: 'application/json'
  					},
					data			: {
						password: 	this.findPsdData.password,
						answer:		this.findPsdData.answer
					}
				})
				return response
			},

			async findPsd(){
				if(this.findPsdData.password !== this.findPsdData.repeatPassword){
					console.log('密码不一致！')
				}
				else if(this.findPsdData.password.trim() ===''){
					console.log('密码不能为空！')
				}
				else{
					const [err,result] = await this.promise_error_process(this.findPsdByAjax())
					if(err){
						console.log(err)
					}
					else{
						if(result.data.message == 'ERROR')
							console.log('密保回答错误！')
						else
							console.log('修改密码成功！')
							this.back()
					}
				}
			},
			async checkUsername(){
				if(this.findPsdData.username.trim() !== ''){
					const [err,result] = await this.promise_error_process(this.checkUsernameByAjax(this.findPsdData.username.trim()))
					if(err){
						return 'error'
					}else{
						console.log("密保问题")
						console.log(result)
						if(result.data.data === 'exist'){
							console.log("显示密保问题")
							console.log(result.data.data)
							this.showQuestion = 1
						}
							
					}
					
				}
			},
			async checkUsernameSigninAndRegister(username_c){
				const [err,result] = await this.promise_error_process(this.checkUsernameByAjax(username_c))
				if(err){
					return 'error'
				}
				if(result.data.data =='exist')
				
					return 'exist'
				else
					return 'no exist'
			},
			async checkSignInUserName(){
				let message = await this.checkUsernameSigninAndRegister(this.username)
				if(message == 'exist')
					console.log('用户名正确')
				else
					console.log('用户名错误')
			},
			async checkRegisterUserName(){
				let message = await this.checkUsernameSigninAndRegister(this.formData.username)
				if(message == 'exist')
					console.log('用户名已存在')
				else
					console.log('用户名正确')
			},
            async signIn(){
				const [err,data] = await this.promise_error_process(this.checkSignIn(this.username,this.password))
				if(err){
					console.log(err.stack)

				}
				else if(data){
					if(data.data.code == 0)
						{
							console.log(data)
							localStorage.setItem('userId',data.data.data.userId)
							this.getIp();
							router.push('/home')
					}
					else{
						console.log(data)
						this.passwordMsg='用户名或密码错误'
					}
						
				}
            },
			async register(){
				if(this.formData.password === this.formData.repeatpassword){
					console.log(this.formData)
					const [err,result] = await this.promise_error_process(this.checkRegister())
					if(err){
						console.log('请求异常！')
					}
					else if(result){
						if(result.data.message === 'ERROR'){
							console.log(result.data.data)
							this.signUpLabel = "注册失败"
						}
						else{
							console.log("注册成功!")
							this.Signup()
							this.signUpLabel = "注册成功"
						}
							
					}
				}
				else{
					this.signUpLabel = "注册成功"
				}
			},
			async getQuestion(){
				const [err,result] = await this.promise_error_process(this.getQuestionByAjax())
				if(err){
					console.log('请求异常')
				}
				else{
					console.log(result.data.data)
					this.findPsdData.question = result.data.data
				}
			},

			//获取ip
			async getIp(){
				try{
					const response = await axios({
						url:		`http://127.0.0.1:8080/api/users/${this.username}`,
						method:		'GET',
						withCredentials:true
					})
					this.ip = response.data.data.address
					if(response.data.data.admin === 1){
						localStorage.setItem('ip' , this.ip)
						localStorage.setItem('ifip' , '1')
					}else{
						localStorage.setItem('ifip' , '0')
					}
					
					
				}catch(err){
					console.log(err)
				}
				
			},
		}
	}
</script>

<template>
	<div class="center-login">
		<div class="logon">
			<div :class="overlaylong">
				<div class="overlaylong-Signin" v-if="disfiex == 0">
					<h2 class="overlaylongH2">Sign in</h2>
					<div>
						<input type="text" v-model="username" @blur="checkSignInUserName" placeholder="user">
						<div>{{ usernameMsg }}</div>
					</div>
					<div>
						<input type="password" v-model="password" placeholder="password">
						<div style="color: #000;"> {{passwordMsg}}</div>
					</div>
					<label>{{ this.signInLabel }}</label>
					<button class="inupbutton" @click="signIn">Sign in</button>
				</div>
				
				<div class="overlaylong-Signup" v-if="disfiex == 1">
					<h2 class="overlaylongH2">Registered Account</h2>
					<input type="text" v-model="formData.username" @blur="checkRegisterUserName" placeholder="user">
					<input type="password" v-model="formData.password" placeholder="password">
					<input type="password" v-model="formData.repeatpassword" placeholder="repeatpassword">
					<input type="text" v-model="formData.email" placeholder="email">
					<button class="inupbutton" @click="register">register</button>
					<div style="color: #000;"> {{this.signUpLabel}}</div>
				</div>
				<div v-if="disfiex == 3" class="overlaylong-find">
					<h2 class="overlaylongH2">Find password</h2>
					<input type="text" v-model="this.findPsdData.username" placeholder="username" @blur="getQuestion" @input="checkUsername">
					<div  v-if="showQuestion === 1" class="pageFindPsd" >
						<label style="color: #000;">密保问题：{{findPsdData.question}}</label><br>
						<input type="text" v-model="findPsdData.answer" placeholder="answer">
					</div>
					<input type="text" v-model="findPsdData.password" placeholder="password">
					<input type="text" v-model="findPsdData.repeatPassword" placeholder="repeatPassword">
					<button	button class="inupbutton" @click="findPsd">Find back</button>
				</div>
			</div>
			<div :class="overlaytitle">
				<div class="overlaytitle-Signin" v-if="disfiex == 0">
					<h2 class="overlaytitleH2">Hello,Friend!</h2>
					<p class="overlaytitleP">
						Enter your personal details and <br>start journey with us
					</p>
					<div class="buttongohs" @click="Signin">sign up</div>
				</div>
				<div class="overlaytitle-Signup" v-if="disfiex == 1">
					<h2 class="overlaytitleH2">Welcome Back!</h2>
					<p class="overlaytitleP">To keep connected with us please login with your personal info</p>
					<div class="buttongohs" @click="Signup">Sign in</div>
				</div>
				<div class="overlaytitle-Signin" v-if="disfiex == 2">
					<h2 class="overlaytitleH2">Hello,Friend!</h2>
					<p class="overlaytitleP" >
						Enter your personal details and <br>journey with us
					</p>
					<div class="buttongohs" @click="Signin">sign up</div>
				</div>
				<div class="overlaytitle-Signin" v-if="disfiex == 3">
					<h2 class="overlaytitleH2">Hello,Friend!</h2>
					<p class="overlaytitleP" >
						Enter your personal details and <br>journey with us
					</p>
					<div class="buttongohs" @click="back">back to sign in</div>
				</div>
			</div>
		</div>
 
	</div>
</template>

<style scoped>
	.center-login {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
 
	h1 {
		font-size: 30px;
		color: black;
	}
 
	.logon {
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
		/* position: relative;
		overflow: hidden; */
		width: 768px;
		max-width: 100%;
		min-height: 650px;
		margin-top: 20px;
		display: flex;
		background: -webkit-linear-gradient(right, #4284db, #29eac4);
	}
 
	.overlaylong {
		border-radius: 10px 0 0 10px;
		width: 50%;
		height: 100%;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
 
	.overlaylongleft {
		border-radius: 0px 10px 10px 0px;
		width: 50%;
		height: 100%;
		background-color: #fff;
		transform: translateX(100%);
		transition: transform 0.6s ease-in-out;
		display: flex;
		align-items: center;
		justify-content: center;
	}
 
	.overlaylongright {
		border-radius: 10px 0 0 10px;
		width: 50%;
		height: 100%;
		background-color: #fff;
		transform: translateX(0%);
		transition: transform 0.6s ease-in-out;
		display: flex;
		align-items: center;
		justify-content: center;
	}
 
	.overlaytitle {
		border-radius: 0px 10px 10px 0px;
		width: 50%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		display: flex;
		align-items: center;
		justify-content: center;
	}
 
 
	.overlaytitleH2 {
		font-size: 30px;
		color: #fff;
		margin-top: 20px;
	}
 
	.overlaytitleP {
		font-size: 15px;
		color: #fff;
		margin-top: 20px;
		word-wrap:break-word;

	}
 
	.overlaytitleleft {
		border-radius: 0px 10px 10px 0px;
		width: 50%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		display: flex;
		align-items: center;
		justify-content: center;
		transform: translateX(0%);
		transition: transform 0.6s ease-in-out;
	}
 
	.overlaytitleright {
		border-radius: 0px 10px 10px 0px;
		width: 50%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		display: flex;
		align-items: center;
		justify-content: center;
		transform: translateX(-100%);
		transition: transform 0.6s ease-in-out;
	}
 
	.overlaytitle-Signin {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
 
	.overlaytitle-Signup {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 30px;
	}
 
	.buttongohs {
		width: 180px;
		height: 40px;
		border-radius: 50px;
		border: 1px solid #fff;
		color: #fff;
		font-size: 15px;
		text-align: center;
		line-height: 40px;
		margin-top: 40px;
	}
 
	.overlaylongH2 {
		font-size: 25px;
		color: black;
		/* width: 250px; */
	}
 
	.overlaylong-Signin {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
 
	.overlaylong-Signup {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
 
	input {
		background-color: #eee;
		border: none;
		padding: 12px 15px;
		margin: 10px 0;
		width: 240px;
	}
	h3{
		font-size: 10px;
		margin-top: 10px;
		cursor: pointer;
	}
	.inupbutton{
		background-color: #29eac4;
		border: none;
		width: 180px;
		height: 40px;
		border-radius: 50px;
		font-size: 15px;
		color: #fff;	
		text-align: center;
		margin: 20px;
	}
	.title-login {
    font-size: 50px;
    text-align: center; /* 居中标题 */
    font-family: '华文行楷', 'Microsoft YaHei', sans-serif;
}
.findPsd{
	font-size: 13%;
	margin-top: 8px;
	border: none;
	color: #424242;
}
.pageFindPsd{
	text-align: left;
	
}
.overlaylong-find{
	display: flex;
	flex-direction: column;
	justify-content: center;
}
</style>
 
